<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-28 09:04:49
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-11-27 20:08:22
-->
<template>
  <div>
    <!-- 顶部背景 -->
    <div class="hander">医疗救治定点医院和发热门诊一览</div>
    <!-- 搜索框 -->
    <div class="sousuo">
      <el-input
        v-model="input"
        style="width: 30%; margin-left: 5px"
        placeholder="请输入内容"
        clearable
      >
      </el-input>

      <el-button type="primary" @click="getHospitalData()">搜索</el-button>
    </div>
    <el-timeline class="List">
      <!-- 医院信息 -->
      <!-- 点击跳转到地图界面显示医院位置信息  -->
      <el-timeline-item
        v-for="(item, index) in HospitalData"
        :key="index"
        :timestamp="item.introduce"
        placement="top"
        @click.native="GivePosition(item)"
      >
        <el-card>
          <h4 style="font-size: 18px">{{ index + 1 }} {{ item.name }}</h4>
          <h4 class="flags">{{ item.flags }}</h4>
          <!-- 图标 -->
          <div class="distance">
            <img width="20px" src="../assets/dingwei.png" alt="" />
            <!-- 距离信息 -->
            <div class="dis">{{ item.distance }}km</div>
          </div>
          <p>
            {{ item.province }} {{ item.city }} {{ item.area }}
            {{ item.address }}
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

// import axios from 'axios'
import { get } from '@/utils/request'
// import { location } from '@amap/amap-jsapi-loader'
export default {
  data() {
    return {
      Gname: '',
      // 接受医院信息
      HospitalData: [],
      // 纬度
      latitude: '',
      // 经度
      longitude: '',
      // 自己的坐标
      MyPosition: '',
      // 搜索框
      input: '',
      // 本人经纬度
      p1: [],
      // 医院所在经纬度
      p2: [],
      // 本人到医院的距离
      dis: ''
    }
  },
  created() {
    this.getHospitalData()
    this.initMap()
  },
  methods: {
    // 获取医院信息
    async getHospitalData() {
      const params = {
        page: 1,
        pageSize: 100,
        name: this.input
      }
      const res = await get(
        'http://39.108.154.175:8001/hospital/pageQuery?',
        params
      )
      // this.HospitalData = res.
      console.log(res.data.list)
      this.HospitalData = res.data.list
      this.initMap()
    },
    // 将医院的位置信息传到地图组件里面
    GivePosition(item) {
      this.$router.push({
        path: 'map',
        query: {
          // 医院名称
          name: item.name,
          // 纬度
          latitude: item.latitude,
          // 经度
          longitude: item.longitude
        }
      })
      console.log(item)
    },
    initMap() {
      AMapLoader.load({
        key: 'd7a35499ceae9b279c3c4948bb99c516', // 设置的key
        version: '2.0',
        plugins: [
          'AMap.ToolBar',
          'AMap.Driving',
          'AMap.Geolocation',
          'onComplete'
        ],
        AMapUI: {
          version: '1.1',
          plugins: []
        },
        Loca: {
          version: '2.0'
        }
      })
        .then((AMap) => {
          const _this = this
          console.log(111111111111111)
          // 获取当前定位
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 超过10秒后停止定位，默认：无穷大
            maximumAge: 0, // 定位结果缓存0毫秒，默认：0
            convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, // 显示定位按钮，默认：true
            buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: false // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          })
          geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
              onComplete(result)
            } else {
              onError(result)
            }
          })

          function onComplete(data) {
            console.log(123321)
            // data是具体的定位信息
            console.log(data)

            _this.HospitalData.map((item) => {
              // 获取当前位置的经纬度
              const p1 = [data.position.lng, data.position.lat]
              // 获取当前页面中每个数据的经纬度
              const p2 = [item.longitude, item.latitude]
              // 计算两点之间的距离
              var dis = AMap.GeometryUtil.distance(p1, p2)
              // console.log((dis / 1000).toFixed(2));
              // 使用一个Vue中的API $set(目标对象,'要新增的属性的名字',要新增的属性的值)
              _this.$set(item, 'distance', (dis / 1000).toFixed(2))
              console.log(dis)
            })
          }

          function onError(data) {
            // 定位出错
            console.log(data)
          }
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>

<style scoped>
.hander {
  width: 100%;
  padding-left: 30px;
  margin-bottom: 20px;

  /* color: white; */
  font-size: 25px;
  line-height: 140px;
  background-image: url('../assets/bg1.png');
}

.List {
  margin-top: 10px;
  font-size: 13px;
}

.Xinxi {
  margin-top: 5px;
}

.flags {
  width: 90%;
  background-color: #ffb34e;
  border-radius: 5px;
}

.distance {
  float: right;
  margin: 0 auto;
}
</style>
